<template>
  <view class="my-userinfo-container">
    <!-- 用户背景图 -->
    <view class="userinfo-toppic" @click="changeBgImg">
      <image :src="userinfo.userBgImg" class="bgimg" v-if="userinfo.userBgImg"></image>
      <image src="../../static/my_imgs/topPic.png" class="bgimg" v-else></image>
    </view>

    <!-- 用户信息 -->
    <view class="my-userinfo">
      <!-- 用户头像 -->
      <view class="userinfo-avatar-box" @click="changeAvatar">
        <image class="userinfo-avatar" :src="userinfo.userAvatar" mode="aspectFill"></image>
      </view>
      <!-- 用户昵称 -->
      <text class="userinfo-nickname">{{userinfo.userName}}</text>
      <!-- 用户点赞量 -->
      <text class="userinfo-praise">{{likeNum}} 获赞</text>
    </view>

    <!-- 模块栏 -->
    <view class="my-module">
      <view class="module-content" @click="gotoCreation">
        <image class="module-content-icon" src="../../static/my_imgs/creation.png"></image>
        <view class="module-content-text">作品</view>
      </view>
      <view class="module-content" @click="gotoPlan">
        <image class="module-content-icon" src="../../static/my_imgs/plan.png"></image>
        <view class="module-content-text">计划</view>
      </view>
      <view class="module-content" @click="gotoCollect">
        <image class="module-content-icon" src="../../static/my_imgs/collect.png"></image>
        <view class="module-content-text">收藏夹</view>
      </view>
      <view class="module-content" @click="gotoCart">
        <image class="module-content-icon" src="../../static/my_imgs/cart.png"></image>
        <view class="module-content-text">购物车</view>
      </view>
    </view>


    <!-- 菜单栏 -->
    <view class="my-menu">
      <view class="menu-item" @click="gotoInformation">
        <image class="menu-icon" src="../../static/my_imgs/information.png"></image>
        <view class="menu-text">个人资料</view>
        <uni-icons type="forward" size="17"></uni-icons>
      </view>
      <view class="menu-item" @click="gotoCalendar">
        <image class="menu-icon" src="../../static/my_imgs/calendar.png"></image>
        <view class="menu-text">打卡日历</view>
        <uni-icons type="forward" size="17"></uni-icons>
      </view>
      <view class="menu-item" @click="gotoRecord">
        <image class="menu-icon" src="../../static/my_imgs/record.png"
          style="width: 42rpx; height: 42rpx; margin-left: -1px;"></image>
        <view class="menu-text">运动记录</view>
        <uni-icons type="forward" size="17"></uni-icons>
      </view>
      <view class="menu-item">
        <image class="menu-icon" src="../../static/my_imgs/feedback.png"
          style="width: 38rpx; height: 38rpx; margin-left: 0.5px;"></image>
        <view class="menu-text">问题反馈</view>
        <uni-icons type="forward" size="17"></uni-icons>
        <button class="menu-feedback-but" plain open-type="feedback"></button>
      </view>
      <view class="menu-item" @click="logout">
        <image class="menu-icon" src="../../static/my_imgs/logout.png"></image>
        <view class="menu-text">退出登录</view>
        <uni-icons type="forward" size="17"></uni-icons>
      </view>
    </view>


  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    name: "my-userinfo",
    data() {
      return {
        avatarUrl: '',
        newUserBgImg: '',
      };
    },
    props: {
      likeNum: {
        type: Number,
        required: true,
      },
    },
    computed: {
      ...mapState('m_user', ['userinfo', 'userTrendList'])
    },
    mounted() {
      // 页面加载完成后，获取头像地址
      // this.avatarUrl = this.userinfo.userAvatar
    },
    methods: {
      ...mapMutations('m_user', ['removeDefaultAddress', 'updateUserInfo', 'updateToken',
        'updateUserClockInList', 'updateUserPlanList', 'updateUserRecordList', 'updateUserVideoList',
        'updateUserArticleList', 'updateUserBgImg', 'updateUserAvatar', 'updateUserTrendList', 'updateUserLikeTrendList'
      ]),
      ...mapMutations('m_music', ['setUserMusicList']),
      ...mapMutations('m_cart', ['updateUserCartList']),
      ...mapMutations('m_trend', ['updateTrendList']),
      async logout() {
        const [err, succ] = await uni.showModal({
          title: '提示',
          content: '确认退出登录吗？'
        }).catch(err => err)

        if (succ && succ.confirm) {
          this.updateToken('')
          this.removeDefaultAddress({})
          this.updateUserInfo({})
          this.updateUserClockInList([])
          this.updateUserPlanList([])
          this.updateUserRecordList([])
          this.updateUserVideoList([])
          this.updateUserArticleList([])
          this.updateUserCartList([])
          this.updateUserTrendList([])
          this.updateUserLikeTrendList([])
          this.updateTrendList([])
          this.setUserMusicList([])
        }
      },

      // 点击更换用户背景图
      changeBgImg() {
        let that = this
        uni.chooseMedia({
          count: 1,
          mediaType: ['image'],
          sourceType: ['album', 'camera'],
          camera: 'back',
          success(res) {
            that.newUserBgImg = res.tempFiles[0].tempFilePath
            // that.updateUserBgImg(newUserBgImg)
            that.uploadBgImgToServer()
          }
        })
      },
      // 更换用户头像事件
      changeAvatar() {
        let that = this
        uni.chooseMedia({
          count: 1,
          mediaType: ['image'],
          sourceType: ['album', 'camera'],
          camera: 'back',
          success(res) {
            that.avatarUrl = res.tempFiles[0].tempFilePath
            that.uploadAvatarToServer()
          }
        })
      },

      // 上传头像到服务器中
      uploadAvatarToServer() {
        const userID = this.userinfo.userID
        console.log('上传头像userID', userID)
        console.log('上传头像')
        uni.uploadFile({
          filePath: this.avatarUrl,
          name: 'image',
          url: 'https://jeoz.top:3000/api/uploadAvatar?userID=' + userID,
          success: res => {
            console.log(res.data)
            const responseData = JSON.parse(res.data);
            const newAvatarUrl = responseData.message.newAvatarUrl;
            console.log(newAvatarUrl);
            this.updateUserAvatar(newAvatarUrl)
            console.log('上传成功')
          }
        })
      },
      // 上传背景图到服务器中
      uploadBgImgToServer() {
        const userID = this.userinfo.userID
        console.log('上传背景图userID', userID)
        console.log('上传背景图')
        uni.uploadFile({
          filePath: this.newUserBgImg,
          name: 'image',
          url: 'https://jeoz.top:3000/api/uploadBgImg?userID=' + userID,
          success: res => {
            const responseData = JSON.parse(res.data);
            const newBgImgUrl = responseData.message.newBgImgUrl;
            this.updateUserBgImg(newBgImgUrl)
            console.log('上传成功')
          }
        })
      },
      // 点击跳转到作品页
      gotoCreation() {
        uni.navigateTo({
          url: '../../subpkg/my_trend/my_trend'
        })
      },
      // 点击跳转到计划页
      gotoPlan() {
        uni.navigateTo({
          url: '../../subpkg/plan/plan'
        })
      },
      // 点击跳转到收藏页
      gotoCollect() {
        uni.navigateTo({
          url: '../../subpkg/favorites/favorites'
        })
      },
      // 点击跳转到购物车页
      gotoCart() {
        uni.navigateTo({
          url: '../../subpkg/stop_cart/stop_cart'
        })
      },
      // 点击跳转到个人资料页
      gotoInformation() {
        uni.navigateTo({
          url: '../../subpkg/my_information/my_information'
        })
      },
      // 点击跳转到打卡日历页
      gotoCalendar() {
        uni.navigateTo({
          url: '../../subpkg/calendar/calendar'
        })
      },
      // 点击跳转到运动记录页
      gotoRecord() {
        uni.navigateTo({
          url: '../../subpkg/record/record'
        })
      },
    }
  }
</script>

<style lang="scss">
  .my-userinfo-container {
    height: 100%;
    background-color: whitesmoke;

    .userinfo-toppic {
      width: 100%;
      height: 280rpx;
      display: flex;
      // justify-content: center;
      // align-items: center;

      .bgimg {
        width: 100%;
        height: 100%;
        flex: 1;
        filter: blur(2px);
        transform: scale(1.02);
        background-color: #ddd;
      }
    }


    .my-userinfo {
      display: flex;
      position: relative;
      top: -80rpx;
      // border-radius: 10rpx;
      // border-radius: 50%;
      margin: 0rpx 0rpx 0rpx 36rpx;
      // border: 1px solid red;

      .userinfo-avatar-box {
        width: 150rpx;
        height: 150rpx;
        border-radius: 50%;
        position: absolute;
        border: 2px solid #eee;


        .userinfo-avatar {
          width: 100%;
          height: 100%;
          // position: absolute;
          object-fit: cover;
          border-radius: 50%;
          // border: 3px solid #eee;
        }
      }

      .userinfo-nickname {
        position: absolute;
        left: 175rpx;
        top: 25rpx;
        color: white;
        font-size: 34rpx;
        font-weight: bold;
      }

      .userinfo-praise {
        position: absolute;
        left: 177rpx;
        top: 90rpx;
        color: grey;
        font-size: 26rpx;
      }
    }

    .my-module {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 675rpx;
      margin: 115rpx auto 45rpx auto;
      justify-content: space-between;
      // height: 200rpx;
      // background-color: yellow;

      .module-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to bottom right, #fba007, #f0c114);
        // background: radial-gradient( #f0c114 40%, #fba007 100%);
        height: 100rpx;
        padding: 10rpx 15rpx;
        width: 120rpx;
        border-radius: 15rpx;
        // box-shadow: 0px 1px 4px 0.1px #c9c9ca;
        box-shadow: 0px 1px 2px 0.1px #ddd;

        .module-content-text {
          font-size: 26rpx;
          font-weight: bold;
          color: white;
          margin-top: 10rpx;
        }

        .module-content-icon {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .module-content:last-child {
        margin-right: 0;
      }
    }

    .my-menu {
      width: 675rpx;
      border-radius: 15rpx;
      margin: 0rpx auto;
      padding: 20rpx;
      background: white;
      // background: linear-gradient(to bottom right, #fffffa, #fff4e0, #fff6f6);
      // margin-top: 16rpx;
      box-sizing: border-box;
      // box-shadow: 0px 2px 4px 0.1px #c9c9ca;
      box-shadow: 0px 1px 2px 0.1px #ddd;

      .menu-item {
        margin: 30rpx;
        margin-top: 50rpx;
        line-height: 60rpx;
        height: 60rpx;
        // border: 1px solid red;
        border-bottom: 1px solid #efefef;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        .menu-text {
          flex: 1;
          font-size: 26rpx;
          font-weight: bold;
          padding-left: 30rpx;
        }

        .menu-icon {
          width: 40rpx;
          height: 40rpx;
        }

        .menu-feedback-but {
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          opacity: 0;
          position: absolute;
        }

      }

      .menu-item:last-child {
        border-bottom: none;
      }
    }
  }
</style>